<template>
    <div>
        <el-tabs>
            <el-tab-pane  label="采购单">
                <el-form :model="caigou" label-width="110px" style="overflow:hidden" :rules="caigouRule" ref="caigouRule">
                    <el-form-item prop="appCaiDan" label="采购单号" class="inline__">
                        <el-input v-model="caigou.caiDan" :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item prop="emp" label="采购员" class="inline__">
                        <el-select v-model="caigou.emp" placeholder="请选择采购员" value-key="empId">
                            <el-option v-for="i in empList" :key="i.empId" :label="i.empName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采购日期" prop="deliveryDate" class="inline__">
                        <el-input :readonly="true">
                            <span style="color:rgb(110,110,110);margin-left: 10px;font-size: 13px" slot="prefix">{{caigou.deliveryDate | format_date}}</span>
                        </el-input>
<!--                        <el-date-picker v-model="caigou.deliveryDate" type="date" placeholder="请选择采购日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>-->
                    </el-form-item>
                    <el-form-item prop="deliveryType" label="交货方式" class="inline__">
                        <el-select v-model="caigou.deliveryType" placeholder="请选择交货方式" value-key="deliveryId">
                            <el-option v-for="i in deliveryTypeList" :key="i.deliveryId" :label="i.deliveryName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="payWey" label="支付方式" class="inline__">
                        <el-select v-model="caigou.payWey" placeholder="请选择支付方式" value-key="payId">
                            <el-option v-for="i in payWeyList" :key="i.payId" :label="i.payName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="invoiceType" label="发票类型" class="inline__">
                        <el-select v-model="caigou.invoiceType" placeholder="请选择发票类型" value-key="invoiceId">
                            <el-option v-for="i in invoiceTypeList" :key="i.invoiceId" :label="i.invoiceName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="appointPay" label="付款约定" class="inline__">
                        <el-select v-model="caigou.appointPay" placeholder="请选择付款约定" value-key="appointId">
                            <el-option v-for="i in appointPayList" :key="i.appointId" :label="i.appointName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="addDel" label="备注" class="inline__">
                        <el-input v-model="caigou.addDel"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="save('caigouRule')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    export default {
        name: "add_order",
        data:function () {
            return{
                //支付方式数据
                payWeyList:[],
                //发票类型数据
                invoiceTypeList:[],
                //付款约定数据
                appointPayList:[],
                //交货方式数据
                deliveryTypeList:[],
                //采购员数据
                empList:[],
                //新增采购单数据
                caigou:{
                    caiDan:this.$store.state.vueAppCai.appCaiDan,
                    deliveryDate:new Date,
                    addDel:'',
                    state:1,
                    appCai:{},
                    emp:this.$store.state.user
                },
                //新增采购单规则
                caigouRule: {
                    deliveryType: [
                        { required: true, message: '请选择交货方式', trigger: 'blur' }
                    ],
                    payWey: [
                        { required: true, message: '请选择支付方式', trigger: 'blur' }
                    ],
                    invoiceType: [
                        { required: true, message: '请选择发票类型', trigger: 'blur' }
                    ],
                    appointPay: [
                        { required: true, message: '请选择付款约定', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            //初始化数据
            init(){
                this.axios.get("api/caigou/pay-list").then(v=>{
                    this.payWeyList=v.data;
                }).catch()
                this.axios.get("api/caigou/invoice-list").then(v=>{
                    this.invoiceTypeList=v.data;
                }).catch()
                this.axios.get("api/caigou/appoint-list").then(v=>{
                    this.appointPayList=v.data;
                }).catch()
                this.axios.get("api/caigou/delivery-list").then(v=>{
                    this.deliveryTypeList=v.data;
                }).catch()
                this.axios.get("api/cai-emp").then(v=>{
                    this.empList=v.data;
                }).catch()
            },
            //保存
            save(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.caigou.appCai=this.$store.state.vueAppCai.detailData
                        this.$axios.post("api/caigou/add_caigou",this.caigou)
                            .then(() => {
                                this.axios.get("api/caigou/change-appcaistate",
                                    {params:{"judge":3,"appCaiId":this.$store.state.vueAppCai.detailData.appCaiId}}).then(()=>{
                                    this.$store.state.vueAppCai.detailData.appState=1
                                    this.global.mes_success("生成采购单成功");
                                    this.clear();
                                    this.$store.state.vueAppCai.addorderVisible = false;
                                    this.$router.push({
                                        path:"/order_index"
                                    })
                                }).catch()
                            }).catch()
                    }else {
                        this.global.mes_warning("请正确填写采购单")
                        return false;
                    }
                });
            },
            //取消新增
            cancel(){
                this.$store.state.vueAppCai.addorderVisible = false;
                this.clear();
            },
            //清空新增采购表数据
            clear(){
                this.caigou = {
                    caiDan:this.$store.state.vueAppCai.appCaiDan,
                    deliveryDate:new Date,
                    addDel:'',
                    state:1,
                    appCai:{},
                    emp:this.$store.state.user
                }
            }
        },
        created() {
            this.init()
        }
    }
</script>
<style scoped>
    .inline__{width:90%!important;display:inline-block}
    .el-select{width:100%!important;}
</style>